<template>
    <div>
        
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="https://i1.hdslb.com/bfs/face/4ff02dee33c2ea214a7eee167684eac5bb86cbbf.jpg@68w_68h.webp">
						<div class="mui-media-body">
							<h1>五味俱全</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间:2019-12-12 12:12:12</span>
                                <span>点击:0次</span>

                            </p>
						</div>
					</a>
				</li>
                <li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="https://i1.hdslb.com/bfs/face/4ff02dee33c2ea214a7eee167684eac5bb86cbbf.jpg@68w_68h.webp">
						<div class="mui-media-body">
							<h1>酸甜</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间:2019-12-12 12:12:12</span>
                                <span>点击:0次</span>

                      </p>
						</div>
					</a>
				</li>
        </ul>
    </div>
</template>

<script>

import { Toast} from 'mint-ui'
export default {
    data(){
        return{
            newslist:[]//加载新闻资讯的数组
        };
    },
    created(){
        this.getNews();
    },
    methods: {
        getNews(){ //获取新闻资讯数据的方法  
                this.$http.get("http://api.wangshuwen.com/getNews").then(result =>{
            //console.log(result.body);
            if (result.body.status === 0) {
                //成功了
                this.newslist = result.body.message;
            }else{}
            //失败了
         Toast('加载新闻列表失败')    
        })
        }
    },
}
</script>

<style lang="scss" scoped>
 .mui-table-view{
     li{
         h1{font-size: 14px; //字体
         }
         .mui-ellipsis{
             font-size: 12px;
             color:#22ff;
             display: flex;
             justify-content: space-between;//解决左右 分行的 代码
         }
     }
 }
</style>
